<template>
	<view class="">
		<view class="form-box">
			<uv-form labelPosition="top" :model="data.form" ref="form" labelWidth="80">
				<view class="" v-for="(item,index) in data.formList" :key="index">
					<form-select-vue type="game" v-if="item.fieldType.code==5" :id="data.info.id" :index="index"
						:item='item' @resValue="resValue"></form-select-vue>
					<form-date-time-vue type="game" v-else-if="item.fieldType.code==7" :id="data.info.id" :index="index"
						:item='item' @resValue="resValue"></form-date-time-vue>
					<formInputVue v-else type="game" :index="index" :item='item' :id="data.info.id"
						@resValue="resValue">
					</formInputVue>
				</view>
				<view class="btn-b">
					<view class="blue-btn" @click="save">保存</view>
				</view>
			</uv-form>

		</view>
		<uv-picker ref="sexPicker" :columns="data.sexDic" keyName="value" @confirm="sexConfirm"></uv-picker>

	</view>
</template>

<script setup>
	import {
		ref,
		toRef,
		toRefs
	} from "vue";
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		getMnumByName,
		saveEntry,
		echoDynamicByGameId,
		echoEntryDetailById
	} from '../../../../requestApi/api.js';
	import formInputVue from "../../../../compoments/form/form-input.vue";
	import formDateTimeVue from "../../../../compoments/form/form-dateTime.vue";
	import formSelectVue from "../../../../compoments/form/form-select.vue";


	const data = ref({
		gameId: '', //赛事id
		form: [],
		sexDic: [],
		sex: '',
		info: {},
		formList: []
	})
	const sexPicker = ref(null);
	onLoad((e) => {
		// getSexDic();
		data.value.info = e.info ? JSON.parse(e.info) : {};
		// console.log('info:', data.value.info)
		data.value.gameId = e.id;
		getForm();


	});

	//改变值
	const resValue = (e) => {
		let findIndex = data.value.form.findIndex((item) => item.index == e.index);
		if (findIndex > -1) {
			//存在
			data.value.form.splice(findIndex, 1);
			data.value.form.push(e);
		} else {
			//不存在
			data.value.form.push(e);
		}
		// console.log(data.value.form)
	};
	//获取表单
	const getForm = () => {
		echoDynamicByGameId({
			id: data.value.gameId
		}).then(res => {
			res.data.map(item => {
				if (item.fieldType.code == 1 || item.fieldType.code == 2) {
					item.fieldType.type = 'text'
				} else if (item.fieldType.code == 3 || item.fieldType.code == 4) {
					item.fieldType.type = 'number'
				} else if (item.fieldType.code == 5) {
					item.fieldOption = JSON.parse(item.fieldOption)
				}
				return {
					...item
				};
			})
			if (Object.keys(data.value.info).length) {
				echoEntryDetailById({
					id: data.value.info.id
				}).then(r => {
					data.value.formList= res.data.map((itm, index) => {
						itm.resValue = r.data[index].value;
						data.value.form.push({
							index: index,
							value: r.data[index].value
						})
						return {
							...itm
						}
					})
				})

			} else {
				data.value.formList = res.data;
			}



		})
	};
	//保存
	const save = () => {
		let arrValue = data.value.form;
		// let arrValue = Object.values(data.value.form);
		let arr = [];
		console.log(data.value.form)
		for (let i = 0; i < data.value.formList.length; i++) {
			let item = data.value.formList[i];
			let findIndex = data.value.form.findIndex(va => va.index == i);
			console.log('index：', i);
			console.log('状态：', item.isRequired);
			console.log('值：', findIndex)


			if (item.isRequired && (findIndex == -1 || !arrValue[findIndex].value)) {
				//验证必填
				uni.showToast({
					icon: 'none',
					title: '请填写完整信息'
				})
				return true;
			} else {

				arr.push({
					id: data.value.formList[i].id,
					value: findIndex > -1 ? arrValue[findIndex].value : '',
					fieldTag: item.fieldTag.code,
				})

			}


		}
		saveEntry({
			gameId: data.value.gameId,
			tformDynamicValueList: arr,
			entryId: data.value.info ? data.value.info.id : ''
		}).then(res => {
			uni.navigateBack(1);
		})



	};
	//选择性别
	const sexConfirm = (e) => {
		data.value.sex = e.value[0].value;
		data.value.form.sex = e.value[0].code;
	};
	//获取性别字典
	const getSexDic = () => {
		getMnumByName({
			enumName: 'sexEnum'
		}).then(res => {
			data.value.sexDic = [res.data];
		})
	};
	//打开选择性别picker
	const selectSex = () => {
		sexPicker.value.open();
	};
</script>

<style lang="scss">
	.form-box {
		padding: 32rpx 38rpx;

		.sex-b {
			position: relative;

			.arrow {
				position: absolute;
				right: 0;
			}
		}
	}


	::v-deep .uv-form-item__body {
		padding: 0 0 10px !important;
	}

	::v-deep .uv-form-item__body__left__content {
		margin-bottom: 10rpx;
	}

	::v-deep .uv-form-item__body__left__content__label {
		color: #585858 !important;
		font-size: 24rpx !important;
	}

	::v-deep .item__body__right__content__icon {
		position: relative;
	}

	::v-deep .uv-icon--right {
		position: absolute;
		right: 24rpx;
		top: -12rpx;
	}

	::v-deep .uv-form-item__body__left__content__required {
		color: #FF2E2E !important;
		font-size: 24rpx !important;
		top: -3px !important;
		font-weight: bold;
		left: -6px !important;

	}
</style>